<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
  </head>
  <body>
    <header>
      <p>智慧商城</p>
    </header>
    <div class="box">
      <div class="sosuo">
        <div class="mask">
          <i class="iconfont icon-sousuo"></i>
          <a href="./搜索页.html">
            <input type="text" placeholder="搜索你要找的商品" />
          </a>
        </div>
      </div>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="#" class="b">
              <img src="./imgs/10004.jpg" width="100%" alt="" />
            </a>
          </div>
          <div class="swiper-slide">
            <a href="#" class="d">
              <img src="./imgs/10005.jpg" width="100%" alt="" />
            </a>
          </div>
          <div class="swiper-slide">
            <a href="#" class="e">
              <img src="./imgs/10006.jpg" width="100%" alt="" />
            </a>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="po">
        <i class="iconfont icon-shengyintianchong"></i>
        <div class="pos">
          <span>智慧商城2.0全新上线，更多新品等你来选~</span>
        </div>
      </div>
      <div class="pic">
        <a href="./智慧商城分类.html" v-for="(item,index) in list">
          <img :src="item.imgUrl" alt="" />
          <p>{{item.text}}</p>
        </a>
      </div>
      <div class="dnf">
        <img src="./imgs/10017.png" alt="" />
      </div>
      <div class="lpl">
        <p>—— 猜你喜欢 ——</p>
      </div>
      <a href="javascript:;" v-for="item in kplList">
        <div class="kpl" @click="id(item.goods_id)">
          <img :src="item.goods_image" alt="" />
          <div class="lok">
            <span>{{item.goods_name}}</span>
            <p>已售{{item.goods_sales}}件</p>
            <div class="dis">
              <p>￥{{item.goods_price_min }}</p>
              <del v-show="item.line_price_min>0"
                ><span>￥{{ item.line_price_min }}</span></del
              >
            </div>
          </div>
        </div>
      </a>
    </div>
    <footer>
      <a href="./智慧商城首页.html">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="./智慧商城分类.html">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="./购物车.html">
        <i class="iconfont icon-gouwuchekong"></i>
        <p>购物车</p>
      </a>
      <a href="./我的.html">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>
    <script src="./js/swiper.js"></script>
    <script src="./axios.js"></script>
    <script src="./vue.js"></script>
  </body>
</html>
<script>
  window.addEventListener('load', function () {
    var mySwiper = new Swiper('.swiper', {
      speed: 300,
      loop: true,
      autoplay: {
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination'
      },
      centeredSlides: true,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    })
  })
  const add = new Vue({
    el: '.box',
    data: {
      list: [],
      kplList: []
    },
    created() {
      this.getBooksList()
    },
    methods: {
      async getBooksList() {
        const arr = await axios.get(
          'http://cba.itlike.com/public/index.php?s=/api/page/detail'
        )
        // console.log(JSON.stringify(arr.data))
        console.log(arr.data.data.pageData)
        this.list = arr.data.data.pageData.items[3].data
        this.kplList = arr.data.data.pageData.items[6].data
      },
      id(id){
        console.log(id)
        location.href = './详情页面.html?'+'uname='+`${id}`
      }
    }
  })

  document.querySelector('.b').addEventListener('click',function () {
   location.href = './详情页面.html?'+'uname='+'10053'
  })
  document.querySelector('.d').addEventListener('click',function () {
    location.href = './详情页面.html?'+'uname='+'10054'
  })
  document.querySelector('.e').addEventListener('click',function () {
    location.href = './详情页面.html?'+'uname='+'10055'
  })
</script>
